const Angular = require('angular');
const app = Angular.module('formApp', []);
app.controller('formCtrl', ['$scope', '$timeout', function ($scope, $timeout) {
  $scope.title = 'form';
  $scope.mainCtrl = {
    loading: false,
    testForm: {

    },
    selectedList: [{
      value: '1',
      label: 'female'
    }, {
      value: '2',
      label: 'male'
    }],
    submit() {
      this.selectedList = [{
        value: '1',
        label: 'female'
      }, {
        value: '2',
        label: 'male'
      }]
      $('.ui.dropdown').dropdown({
        maxSelections: 1,
        onChange(val, text, $selectedItem) {
          console.log(val, text, $selectedItem);
          $scope.mainCtrl.testForm.gender = val;
        }
      });
      if (this.loading) {
        return;
      }
      this.loading = true;
      console.log(this.testForm, $scope.testForm);
      $timeout(() => {
        this.loading = false;
      }, 2000)
    }
  }
  $timeout(function () {
    $('.ui.dropdown').dropdown({
      maxSelections: 1,
      onChange(val, text, $selectedItem) {
        console.log(val, text, $selectedItem);
        $scope.mainCtrl.testForm.gender = val;
      },
    });
    $('.ui.dropdown').dropdown('set selected', '0');
  })
  $.fn.dropdown.settings.message = {
    maxSelections: '最多选择 {maxCount} 条'
  }
  $scope.$watch('testForm.$invalid', (newVal) => {
    console.log(newVal)
  })
}])
/**
 * angularjs的form表单校验通过form元素的name属性值（例如testForm）生成对应的$scope.testForm
 * 通过$scope.testForm下的$dirty,$invalid,$valid等属性监控全局form表单的值变化、非空、校验通过等
 * 若form表单下的表单元素例如input、select等用ng-model绑定的，则可通过表单元素的name属性值(例如input1)，
 * 生成对应的$scope.testForm.input1(可监听变化的对象)，
 * 则如上监听$dirty,$invalid,$valid等属性监控单个form表单元素的值变化、非空、校验通过等，
 * 若表单元素校验不通过，系统会自动加上对应的class，我们就可以通过class名称变化来提示用户
 * 单个表单元素的一些属性说明
 * $dirty: 表单有填写记录
 * $pristine: 表单没有填写记录
 * $invalid:  字段内容是非法的
 * $valid: 字段内容合法的
 * $error:  错误对象包含但不限于以下属性required,pattern,maxlength等，不同属性表示不同的校验错误
 * $touched:  是否点击过
 * $untouched: 是否没有点击过
 */
